import { StyleSheet, Text, View, Button } from 'react-native'
import React, { useEffect, useState } from 'react'
import { launchImageLibrary } from 'react-native-image-picker'

const Publish = () => {
  const [photoInfo, setPhotoInfo] = useState<{
    uri: string
    fileName: string
    fileSize: number
    width: number
    height: number
  }>()
  // 获取相册
  const onPressImages = async () => {
    const res = await launchImageLibrary({
      mediaType: 'photo',
      quality: 1,
      includeBase64: true
    })
    if (res.assets?.length) {
      const { uri, fileName, fileSize, width, height } = res.assets[0]
      setPhotoInfo({
        uri: uri!,
        fileName: fileName!,
        fileSize: fileSize!,
        width: width!,
        height: height!
      })
    }
  }

  useEffect(() => {
    onPressImages()
  }, [])
  return (
    <View style={styles.root}>
      <Text style={styles.txt} selectable>
        图片地址：{photoInfo?.uri}
      </Text>
      <Text style={styles.txt} selectable>
        图片名称：{photoInfo?.fileName}
      </Text>
      <Text style={styles.txt} selectable>
        图片大小：{photoInfo?.fileSize} 字节
      </Text>
      <Text style={styles.txt} selectable>
        图片宽度：{photoInfo?.width} px
      </Text>
      <Text style={styles.txt} selectable>
        图片高度：{photoInfo?.height} px
      </Text>
    </View>
  )
}

export default Publish

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: '#fff'
  },
  txt: {
    flexDirection: 'row',
    alignItems: 'center',
    color: '#333',
    paddingHorizontal: 15,
    paddingVertical: 15,
    borderBottomColor: '#ccc',
    borderBottomWidth: 1,
    fontSize: 18,
    flexWrap: 'wrap'
  }
})
